<template>
  <div class="template">
     <div class="search">
      <div class="search-center">
         <Button
          type="primary"
          @click="addAdvertisement"
          >+ 发布新广告</Button>
      </div>    
    </div>
   <Tabs type="card" v-model="search.type" @on-click="searchFn()">
     <TabPane label="首页banner" name="1"></TabPane>
     <TabPane label="首页弹窗" name="2"></TabPane>
     <TabPane label="公告" name="3"></TabPane>
   </Tabs>

    <div class="table" v-if="search.type!=3">
      <Table
        :columns="diyData.columns"
        :data="apiData.tableList"
      >
      </Table>
    </div>
    <div class="table" v-else>
      <Table
        :columns="diyData.columnsNotice"
        :data="apiData.tableList"
      >
      </Table>
    </div>
  </div>
</template>

<script>
import {apiBannerList,apiBannerSave,apiBannerDelete} from '@/api/advertisement-manage.js'
export default {
  name: 'advertisement-manage',
  data () {
    return {
        query:{},
      search: {
        type:'1',
        status:'',
        pageNo: 1,
        pageSize: 10,
      },
      diyDom:{
        showModal:false
      },
      diyData: {
        columns: [
          {
            title: '图片',
            render: (h, params) => {
              return h('img', {
                    attrs: {
                        src: params.row.imgUrl,
                    },
                    style: {
                        width: '50px',
                    },
                })
             }
          },
          {
            title: '链接',
            key: 'otherLinkUrl',
             render: (h, params) => {
              return h('div', [
                h('p', params.row.otherLinkUrl?params.row.otherLinkUrl:params.row.productLinkUrl?'/pages/index/index/?CommodityID= '+params.row.productLinkUrl :'')
              ])
            }
          },
          {
            title: '状态',
            key: 'status',
            render: (h, params) => {
              return h('div', [
                h('p', params.row.status==1?'生效':'禁用')
              ])
            }
          },
          {
            title: '发布时间',
            key: 'createTime',
          },
          {
            title: '操作',
            width:'150px',
            fixed: 'right',
            render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                  this.$router.push({
                                    name: "advertisement-edit",
                                    query: {
                                        id: params.row.id,
                                        type:params.row.type,

                                        row:JSON.stringify(params.row)
                                    },
                                    });
                              }
                          },                            
                        },
                      '编辑'
                      ),
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                this.$Modal.confirm({
                                    title: '提示',
                                    content: '确认删除？',
                                    onOk: () => {
                                        apiBannerDelete({
                                            id: params.row.id
                                        }).then(res => {
                                            this.$Message.success('操作成功');
                                            this.getTableList();
                                        });
                                    }
                                });
                              }
                          },                            
                        },
                      '删除'
                      ),
                  ])
                }
          },
        ],
        columnsNotice: [
          {
            title: '公告内容',
            key: 'title',
          },
          {
            title: '状态',
            key: 'status',
            render: (h, params) => {
              return h('div', [
                h('p', params.row.status==1?'生效':'禁用')
              ])
            }
          },
          {
            title: '发布时间',
            key: 'createTime',
          },
          {
            title: '操作',
            width:'150px',
            fixed: 'right',
            render: (h, params) => {
                  return h('div', [
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                  this.$router.push({
                                    name: "advertisement-edit",
                                    query: {
                                        id: params.row.id,
                                        type:params.row.type||this.search.type,
                                        row:JSON.stringify(params.row)
                                    },
                                    });
                              }
                          },                            
                        },
                      '编辑'
                      ),
                      h('Button', {
                          props: {
                            size: 'small',
                          },
                          style:{
                              marginRight:'10px',
                              fontSize:'14px',
                          },
                          on: {
                              click: () => {
                                this.$Modal.confirm({
                                    title: '提示',
                                    content: '确认删除？',
                                    onOk: () => {
                                        apiBannerDelete({
                                            id: params.row.id
                                        }).then(res => {
                                            this.$Message.success('操作成功');
                                            this.getTableList();
                                        });
                                    }
                                });
                              }
                          },                            
                        },
                      '删除'
                      ),
                  ])
                }
          },
        ]
      },
      apiData: {
        total: 0,
        tableList: [], 
      }
    }      
  },
  methods: {
        // 分页
    pageChange (e) {
      this.search.pageNo = e
      this.getTableList()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getTableList()
    },
    // 搜索
    searchFn () {
      this.search.pageNo = 1
      this.getTableList()
    }, 
    getTableList(){
      this.$store.commit('setSpinShow', true)
      var opt = { ...this.search,...this.query }
      apiBannerList(opt).then((res) => {
        this.apiData.tableList = res.data
      }).finally(() => this.$store.commit('setSpinShow', false))
    },
    addAdvertisement(){
        this.$router.push({
            name: "advertisement-edit",
            query: {
                type:this.search.type
            }
            });
    }
  },
   mounted () {
    this.query=this.$route.query
    this.getTableList()
  },
}
</script>

<style scoped lang="less">
.template{
  width: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
}
.button-border{
  margin-right: 10px;
  
}
</style>
 